<template>
  <div class="app-container">
    <el-card class="box-card">
      <!-- title -->
      <div slot="header" class="clearfix">
        <div class='container'>试题录入</div>
      </div>

      <!-- content -->
      <el-form :model="ruleForm" :rules="rule" ref="ruleForm" class="demo-ruleForm" label-width="120px" v-loading="loading">
        <el-form-item label="学科：" prop="subjectID">
          <el-select v-model="ruleForm.subjectID" placeholder="请选择" style="width: 35%;">
            <el-option :label="item.subjectName" :value="item.id" v-for="item in employee" :key="item.id" @click.native="selectChange(item.id)"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录：" prop="catalogID">
          <el-select v-model="ruleForm.catalogID" placeholder="请选择" style="width: 35%;">
            <el-option :label="item.label" :value="item.value" v-for="item in catalogIDList" :key="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="企业：" prop="enterpriseID">
          <el-select v-model="ruleForm.enterpriseID" placeholder="请选择" style="width: 35%;">
            <el-option :label="item.company" :value="item.id" v-for="item in company" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="城市：" prop="province">
          <el-select v-model="ruleForm.province" placeholder="请选择" style="width: 17%;">
            <el-option :label="item" :value="item" v-for="item in cityList" :key="item" @click.native="clickCityList(item)"></el-option>
          </el-select>&nbsp;
          <el-select v-model="ruleForm.city" placeholder="请选择" style="width: 17%;">
            <el-option :label="item" :value="item" v-for="item in areaList" :key="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="方向：" prop="direction">
          <el-select v-model="ruleForm.direction" placeholder="请选择" style="width: 35%;">
            <el-option :label="item" :value="item" v-for="item in directionList" :key="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="题型：" prop="questionType">
          <el-radio-group v-model="ruleForm.questionType" style="width: 35%;">
            <el-radio label="1">单选</el-radio>
            <el-radio label="2">多选</el-radio>
            <el-radio label="3">简答</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="难度：" prop="difficulty">
          <el-radio-group v-model="ruleForm.difficulty" style="width: 35%;">
            <el-radio label="1">简单</el-radio>
            <el-radio label="2">一般</el-radio>
            <el-radio label="3">困难</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="题干：" prop="question">
          <!-- 使用 v-model 进行双向的数据绑定 -->
          <quill-editor v-model="ruleForm.question" @blur="$refs.ruleForm.validateField('question')"></quill-editor>
        </el-form-item>
        <Radio v-if="ruleForm.questionType === '1'" ref="optionsAll" :optionsList='ruleForm.options'></Radio>
        <Checkbox v-if="ruleForm.questionType === '2'" ref="optionsAll" :Checkbox='ruleForm.options' :clickGet='getDetail'></Checkbox>
        <el-form-item label="解析视频：" prop="videoURL">
          <el-input v-model="ruleForm.videoURL" style="width: 35%;"></el-input>
        </el-form-item>
        <el-form-item label="答案解析：" prop="answer">
          <!-- 使用 v-model 进行双向的数据绑定 -->
          <quill-editor v-model="ruleForm.answer" @blur="$refs.ruleForm.validateField('answer')"></quill-editor>
        </el-form-item>
        <el-form-item label="题目备注：">
          <el-input type="textarea" v-model="ruleForm.remarks" style="width: 35%;"></el-input>
        </el-form-item>
        <el-form-item label="试题标签：" prop="tags">
            <el-select
              v-model="ruleForm.tags"
              multiple
              filterable
              allow-create
              default-first-option
              style="width: 35%;"
              placeholder="请选择文章标签">
                <el-option
                  v-for="item in simpleList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.label">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="submitForm" v-if="$route.query.id">确认修改</el-button>
          <el-button type="primary" @click="submitForm" v-else>确认提交</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import Radio from '@/components/questionsnew/radio.vue'
import Checkbox from '@/components/questionsnew/checkbox.vue'
import { list } from '@/api/hmmm/subjects'
import { list as listALL } from '@/api/hmmm/companys'
import { simple } from '@/api/hmmm/directorys'
import { provinces, citys } from '@/api/hmmm/citys'
import { simple as simpleAll } from '@/api/hmmm/tags'
import { direction } from '@/api/hmmm/constants'
import { add, detail, update } from '@/api/hmmm/questions'
export default {
  components: {
    Radio,
    Checkbox
  },
  data () {
    return {
      ruleForm: {
        subjectID: '',
        catalogID: '',
        enterpriseID: '',
        province: '',
        city: '',
        direction: '',
        questionType: '1',
        difficulty: '1',
        question: '',
        answer: '',
        options: [],
        isRight: '',
        imageUrl: '',
        remarks: '',
        tags: '',
        videoURL: ''
      },
      id: '',
      employee: [],
      catalogIDList: [],
      company: [],
      cityList: [],
      areaList: [],
      simpleList: [],
      directionList: direction,
      dialogVisible: false,
      loading: false,
      rule: {
        subjectID: [
          { required: true, message: '请选择学科', trigger: 'change' }
        ],
        catalogID: [
          { required: true, message: '请选择目录', trigger: 'change' }
        ],
        enterpriseID: [
          { required: true, message: '请选择企业', trigger: 'change' }
        ],
        province: [
          { required: true, message: '请选择地区', trigger: 'change' }
        ],
        direction: [
          { required: true, message: '请选择方向', trigger: 'change' }
        ],
        questionType: [],
        difficulty: [],
        question: [
          { required: true, message: '请输入文章内容', trigger: 'blur' }
        ],
        answer: [
          { required: true, message: '请输入文章内容', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 提交
    submitForm () {
      if (this.ruleForm.questionType !== '3') this.ruleForm.options = this.$refs.optionsAll.options
      this.$refs.ruleForm.validate(async valid => {
        if (!valid) return
        this.ruleForm.tags = this.ruleForm.tags.join()
        if (this.$route.query.id) {
          const data = { ...this.ruleForm, id: +this.$route.query.id }
          const { data: res } = await update(data)
          if (res) this.$message.success('修改成功')
          this.$router.back()
        } else {
          const { data: res } = await add(this.ruleForm)
          if (res) this.$message.success('录入成功')
          this.$router.push('/questions/list')
        }
      })
    },
    // 获取目录/标签
    async selectChange (id) {
      this.ruleForm.catalogID = ''
      const data = {
        subjectID: id
      }
      const { data: res } = await simple(data)
      const arr = await simpleAll(data)
      this.simpleList = arr.data
      this.catalogIDList = res
    },
    // 获取地区
    clickCityList (id) {
      const res = citys(id)
      this.areaList = res
    },
    // 修改
    async getDetail () {
      if (!this.$route.query.id) return
      const data = { id: this.$route.query.id }
      const res = await detail(data)
      this.ruleForm = res.data
      this.ruleForm.tags = res.data.tags.split(',')
    }
  },
  watch: {
    $route () {
      this.ruleForm = {}
    }
  },
  // 获取数据
  async created () {
    this.loading = true
    const { data: res } = await list({ page: 1, pagesize: 999 })
    this.employee = res.items
    const { data: all } = await listALL({ page: 1, pagesize: 999 })
    this.company = all.items
    const arr = provinces()
    this.cityList = [...arr]
    this.getDetail()
    this.loading = false
  }
}
</script>

<style scoped lang='scss'>
::v-deep .ql-editor {
  min-height: 200px;
}
::v-deep .el-textarea__inner {
  height: 100px;
}
</style>
